<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Close" @click="handleClose"
          >关闭</el-button
        >
      </el-col>
    </el-row>
    <div>
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="照片:" prop="photo" v-if="form.photo">
              <image-upload v-model="form.photo" disabled />
            </el-form-item>
            <el-form-item label="学校:" v-if="form.school">
              <el-input v-model="form.school" disabled />
            </el-form-item>
            <el-form-item label="学号:" v-if="form.studentId">
              <el-input v-model="form.studentId" disabled />
            </el-form-item>
            <el-form-item label="姓名:" v-if="form.name">
              <el-input v-model="form.name" disabled />
            </el-form-item>
            <el-form-item label="性别:" v-if="form.gender">
              <dict-tag :options="sys_user_sex" :value="form.gender" />
            </el-form-item>
            <el-form-item label="年级:" v-if="form.grade">
              <span>{{ form.grade }}级</span>
            </el-form-item>
            <el-form-item label="专业:" v-if="form.majorId">
              <div v-for="item in majorList" :key="item.majorId">
                <span v-if="item.majorId == form.majorId">{{
                  item.majorName
                }}</span>
              </div>
            </el-form-item>
            <el-form-item label="班级:" v-if="form.classe">
              <span>{{ form.classe }}班</span>
            </el-form-item>
            <el-form-item label="学籍状态:" v-if="form.studentStatus">
              <dict-tag :options="student_status" :value="form.studentStatus" />
            </el-form-item>
            <el-form-item label="联系电话:" v-if="form.phone">
              <el-input v-model="form.phone" disabled />
            </el-form-item>
            <el-form-item label="邮箱:" v-if="form.email">
              <el-input v-model="form.email" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="入学日期:"
              label-width="120px"
              v-if="form.admissionDate"
            >
              <el-input v-model="form.admissionDate" disabled />
            </el-form-item>
            <el-form-item
              label="预计毕业:"
              label-width="120px"
              v-if="form.graduationDate"
            >
              <el-input v-model="form.graduationDate" disabled />
            </el-form-item>
            <el-form-item
              label="籍贯:"
              label-width="120px"
              v-if="form.nativePlace"
            >
              <el-input v-model="form.nativePlace" disabled />
            </el-form-item>
            <el-form-item label="民族:" label-width="120px" v-if="form.nation">
              <el-input v-model="form.nation" disabled />
            </el-form-item>
            <el-form-item
              label="政治面貌:"
              label-width="120px"
              v-if="form.politicalStatus"
            >
              <el-input v-model="form.politicalStatus" disabled />
            </el-form-item>
            <el-form-item
              label="出生日期:"
              label-width="120px"
              v-if="form.birthDate"
            >
              <el-input v-model="form.birthDate" disabled />
            </el-form-item>
            <el-form-item
              label="最高全日制学历:"
              label-width="120px"
              v-if="form.highestEducation"
            >
              <el-input v-model="form.highestEducation" disabled />
            </el-form-item>
            <!-- <el-form-item label="职业资格及职称:" label-width="120px">
              <el-input v-model="form.professionalQualification" disabled />
            </el-form-item> -->
            <el-form-item
              label="职业资格及职称:"
              label-width="120px"
              v-if="form.professionalQualification"
            >
              <el-input v-model="form.professionalQualification" disabled />
            </el-form-item>
            <el-form-item
              label="职业技能证书:"
              label-width="120px"
              v-if="form.certificateName && form.certificateName.length > 0"
            >
              <el-input-tag
                v-model="form.certificateName"
                tag-type="primary"
                disabled
              />
            </el-form-item>
            <el-form-item
              label="教育背景:"
              label-width="120px"
              v-if="form.educationBackground"
            >
              <el-input
                v-model="form.educationBackground"
                type="textarea"
                :rows="4"
                disabled
              />
            </el-form-item>

            <el-form-item
              label="实习经历:"
              label-width="120px"
              v-if="form.internshipExperience"
            >
              <el-input
                v-model="form.internshipExperience"
                type="textarea"
                :rows="4"
                disabled
              />
            </el-form-item>
            <el-form-item
              label="自我评价:"
              label-width="120px"
              v-if="form.selfEvaluation"
            >
              <el-input
                v-model="form.selfEvaluation"
                type="textarea"
                :rows="4"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import router from "@/router/index";
import { listMajor } from "@/api/manage/major";
import { loadAllParams } from "@/api/page";
import { getCertificateNameByStudentId } from "@/api/manage/certificate";

const { proxy } = getCurrentInstance();
const { sys_user_sex } = proxy.useDict("sys_user_sex");
const { student_status } = proxy.useDict("student_status");

// 原始数据（模拟接口返回）
const originData = router.currentRoute.value.query;

// 响应式对象
const data = reactive({
  form: {},
});

const { queryParams, form, rules } = toRefs(data);

/** 返回按钮操作 */
function handleClose() {
  const obj = { path: "/stuarchive/archive" };
  proxy.$tab.closeOpenPage(obj);
}
/**获取路由数据 */
function getRouterData() {
  form.value = JSON.parse(originData.form);
  const _studentId = form.value.studentId;
  getCertificateNameByStudentId(_studentId).then((res) => {
    form.value.certificateName = res.data;
  });
}

/**获取专业数据 */
const majorList = ref([]);
function getMajorList() {
  listMajor(loadAllParams).then((response) => {
    majorList.value = response.rows;
  });
}

getMajorList();
getRouterData();
</script>